<!-- [COMPONENT] : 部门选择下拉框

使用示例：
1） 下拉框
<select-bank  :value="scope.row.deptId"/>
<select-bank  :value="scope.row.deptId" label="deptCode"/>
2） 列数据
<select-bank  isCol"  :value="scope.row.deptId"/>
<select-bank  isCol"  :value="scope.row.deptId" label="deptCode"/>
-->

<template>
  <span v-if="isCol">
    <span  v-for="xx in getCol"  class="col" >
      {{xx[label]}}
    </span>
  </span>
  <span v-else>
     <string-multiple-select
       v-model="selectedValue"
       :placeholder="placeholder"
       :clearable="clearable"
       :disabled="disabled"
       :multiple="multiple"
       :filterable="filterable"
       :loading="loading"
       @change="handleChange"
       @focus="handleFocus"
     >
    <el-option
      v-for="obj in options"
      :key="obj.deptId"
      :label="obj[label]"
      :value="obj.deptId"
    />

       <!-- 加载状态或无数据提示 -->
    <template #empty>
      <div class="empty-text">
        {{ loading ? '加载中...' : '暂无数据' }}
      </div>
    </template>
     </string-multiple-select>
  </span>
</template>

<script>
import {listDept} from "@/api/system/dept";

import {initData, baseMethods} from "../base";

let baseData = initData("SelectDept", "用人单位", "deptId");
baseData.props = {
  ...baseData.props,
  label: {
    type: String,
    default: "deptName"
  },
}

export default {
  ...baseData,
  methods: {
    ...baseMethods(listDept),
  }
}

</script>

<style scoped>
.col {
  display: inline-block;
  margin-right: 10px;
  /*border-bottom: 1px dotted;*/
}

.empty-text {
  padding: 10px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>
